/* 移动端通用样式 */

/* 布局相关 */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

/* 文本相关 */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-overflow-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 颜色相关 */
.color-primary {
  color: #007aff;
}

.color-success {
  color: #07c160;
}

.color-warning {
  color: #ff976a;
}

.color-danger {
  color: #ee0a24;
}

.color-gray {
  color: #969799;
}

.color-gray-dark {
  color: #646566;
}

/* 背景色 */
.bg-white {
  background-color: #fff;
}

.bg-gray {
  background-color: #f7f8fa;
}

/* 边距相关 (基于rem) */
.margin-top-sm {
  margin-top: 0.2rem;
}

.margin-top {
  margin-top: 0.4rem;
}

.margin-top-lg {
  margin-top: 0.8rem;
}

.margin-bottom-sm {
  margin-bottom: 0.2rem;
}

.margin-bottom {
  margin-bottom: 0.4rem;
}

.margin-bottom-lg {
  margin-bottom: 0.8rem;
}

.margin-left-sm {
  margin-left: 0.2rem;
}

.margin-left {
  margin-left: 0.4rem;
}

.margin-left-lg {
  margin-left: 0.8rem;
}

.margin-right-sm {
  margin-right: 0.2rem;
}

.margin-right {
  margin-right: 0.4rem;
}

.margin-right-lg {
  margin-right: 0.8rem;
}

.padding-sm {
  padding: 0.2rem;
}

.padding {
  padding: 0.4rem;
}

.padding-lg {
  padding: 0.8rem;
}

.padding-h-sm {
  padding: 0 0.2rem;
}

.padding-h {
  padding: 0 0.4rem;
}

.padding-h-lg {
  padding: 0 0.8rem;
}

.padding-v-sm {
  padding: 0.2rem 0;
}

.padding-v {
  padding: 0.4rem 0;
}

.padding-v-lg {
  padding: 0.8rem 0;
}

/* 页面容器 */
.page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.container {
  max-width: 750px;
  margin: 0 auto;
  background-color: #fff;
  min-height: 100vh;
}

/* 1px边框解决方案 */
.border-1px {
  position: relative;
}

.border-1px::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: 0 0;
  border: 1px solid #ebedf0;
  box-sizing: border-box;
  pointer-events: none;
}

.border-bottom-1px {
  position: relative;
}

.border-bottom-1px::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ebedf0;
  transform: scaleY(0.5);
  transform-origin: 0 100%;
}

/* 安全区域适配 */
.safe-area-top {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 现代移动端点击优化（替代FastClick） */
* {
  touch-action: manipulation;
}

/* 按钮和可点击元素的优化 */
button,
input,
a,
[role="button"],
.clickable {
  touch-action: manipulation;
  cursor: pointer;
}

/* 禁用iOS长按菜单 */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 允许输入框选择文本 */
input,
textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

/* 优化点击反馈 */
button:active,
.van-button:active,
[role="button"]:active,
.clickable:active {
  opacity: 0.7;
}